<template>
    <div>
        <div v-if="typeThree" class="home_list">
            <router-link
                class="home_item"
                :to="`/details/${item.comic_id}`"
                v-for="item in typeThree"
                :key="item.comic_id"
            >
                <van-image
                    width="27.6vw"
                    height="36.8vw"
                    lazy-load
                    fit="cover"
                    :src="`${item.vertical_cover}@100w.jpg`"
                />
                <h3>{{ item.title }}</h3>
                <p>{{ item.recommendation }}</p>
                <div v-if="item.recommendation == ''">
                    <p v-if="item.last_short_title == '最终话'">[完结]{{ item.total }}共话</p>
                    <p v-else>更新至{{ item.total - 1 }}话</p>
                </div>
                <div class="sound" v-if="item.type == 1">
                    <img src="../assets/images/er.png" alt="" />
                    Vomic
                </div>
            </router-link>
        </div>
        <div v-if="typeSeven" class="seven_list">
            <div
                class="seven_item"
                :to="`/details/${item.comic_id}`"
                v-for="(item, index) in typeSeven"
                :key="item.comic_id"
            >
                <router-link :to="`/details/${item.comic_id}`">
                    <van-image lazy-load fit="cover" :src="`${item.cover}@400w.jpg`" />
                </router-link>
                <h3>
                    {{ item.comic_title }}
                    <b v-if="item.styles.length">{{ item.styles[0].name }}</b>
                </h3>
                <p>{{ item.recommendation }}</p>
                <span>No.{{ index + 1 }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        typeThree: {
            type: Array,
        },
        typeSeven: {
            type: Array,
        },
    },
    data() {
        return {};
    },
    created() {},
    methods: {},
};
</script>

<style lang="scss" scoped>
.home_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .home_item {
        padding: 10px 0;
        position: relative;
        width: 30%;
        h3 {
            padding-top: 5px;
            color: #1a1d1d;
        }
        p {
            color: rgba(0, 0, 0, 0.5);
        }
        h3,
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
        .sound {
            display: flex;
            justify-content: center;
            align-content: center;
            position: absolute;
            left: 3px;
            bottom: 62px;
            border-radius: 20px;
            padding: 3px 5px;
            color: #fff;
            font-size: 12px;
            background: #594e49;
            img {
                width: 18px;
                padding-right: 3px;
            }
        }
    }
}
.seven_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .seven_item:first-child {
        padding-top: 15px;
        position: relative;
        width: 92vw;
        height: 51.46vw;
        margin-bottom: 60px;
        h3 {
            font-weight: 600;
            padding-top: 5px;
            opacity: 0.7;
            font-size: 20px;
            display: flex;
            align-content: center;
            b {
                font-size: 12px;
                color: rgb(79 79 222);
                background: #ebedf0;
                padding: 4px 10px;
                display: block;
                border-radius: 20px;
                margin-left: 10px;
                line-height: 22px;
            }
        }
        p {
            color: rgba(0, 0, 0, 0.3);
        }
        h3,
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
        span {
            position: absolute;
            display: block;
            background: #f00;
            position: absolute;
            top: 15px;
            left: 0;
            padding: 2px 4px;
            color: #fff;
            font-size: 12px;
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 22px solid transparent;
                border-left: 10px solid #f00;
                position: absolute;
                right: -9px;
                top: 0;
            }
        }
    }
    .seven_item:nth-child(2),
    .seven_item:nth-child(3),
    .seven_item:nth-child(4),
    .seven_item:nth-child(5) {
        padding-top: 15px;
        width: 44vw;
        height: 24.8vw;
        margin-bottom: 45px;
        position: relative;
        h3 {
            font-weight: 600;
            padding-top: 5px;
            opacity: 0.7;
        }
        p {
            color: rgba(0, 0, 0, 0.3);
        }
        h3,
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
        span {
            position: absolute;
            display: block;
            background: #f00;
            position: absolute;
            top: 15px;
            left: 0;
            padding: 2px 4px;
            color: #fff;
            font-size: 12px;
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 22px solid transparent;
                border-left: 10px solid #f00;
                position: absolute;
                right: -9px;
                top: 0;
            }
        }
    }
    .seven_item:nth-child(6),
    .seven_item:nth-child(7),
    .seven_item:nth-child(8),
    .seven_item:nth-child(9) {
        padding-top: 15px;
        width: 21vw;
        height: 21vw;
        position: relative;
        h3 {
            font-weight: 600;
            padding-top: 5px;
            opacity: 0.7;
        }
        p {
            color: rgba(0, 0, 0, 0.3);
        }
        h3,
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
        }
        span {
            position: absolute;
            display: block;
            background: #f00;
            position: absolute;
            top: 15px;
            left: 0;
            padding: 2px 4px;
            color: #fff;
            font-size: 12px;
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 22px solid transparent;
                border-left: 10px solid #f00;
                position: absolute;
                right: -9px;
                top: 0;
            }
        }
    }
}
</style>
